<script>
  import $ from '../dfish.js'
  import Dialog from './Dialog.vue'

  let inst = null

  export default {
    name: 'w-tip',
    mixins: [Dialog],
    props: ['text', 'face'],
    methods: {
      x_default() {
        return {
          prong: true,
          autoHide: true,
        }
      },
    },
    computed: {
      html_class() {
        return 'w-dialog w-vertical' + (this.x.face && ' z-face-' + this.x.face)
      },
      defaultSnapTargetElem() {
        return this.commander.snapElem()
      },
      defaultSnapPosition() {
        return 'tb,rl,lr,bt,rr,ll,bb,tt,cc'
      }
    },
    mounted() {
      if (this.isEntity) {
        inst && $.close(inst)
        inst = this.uid
      }
    },
    unmounted() {
      if (this.isEntity) {
        inst = null
      }
    }
  }
</script>

<style>
  .w-tip.w-dialog {
    border: 1px solid #2498ff;
    background: #f5faff;
    box-shadow: 0 0 4px #d9d9d9
  }

  .w-tip .w-tip-x {
    position: absolute;
    right: 3px;
    top: 3px;
    padding: 0 3px;
    cursor: pointer
  }

  .w-tip .f-i-close {
    font-size: 12px;
    color: #999
  }

  .w-tip .w-dialog-prong.z-b .w-dialog-prong-in {
    border-top-color: #f5faff
  }

  .w-tip .w-dialog-prong.z-b .w-dialog-prong-out {
    border-top-color: #2498ff
  }

  .w-tip .w-dialog-prong.z-t .w-dialog-prong-in {
    border-bottom-color: #f5faff
  }

  .w-tip .w-dialog-prong.z-t .w-dialog-prong-out {
    border-bottom-color: #2498ff
  }

  .w-tip .w-dialog-prong.z-l .w-dialog-prong-in {
    border-right-color: #f5faff
  }

  .w-tip .w-dialog-prong.z-l .w-dialog-prong-out {
    border-right-color: #2498ff
  }

  .w-tip .w-dialog-prong.z-r .w-dialog-prong-in {
    border-left-color: #f5faff
  }

  .w-tip .w-dialog-prong.z-r .w-dialog-prong-out {
    border-left-color: #2498ff
  }

  .w-tip.w-dialog.z-face-warn {
    border: 1px solid #f3e041;
    background: #faf0cd;
    box-shadow: 0 0 4px #d9d9d9
  }

  .w-tip.z-face-warn .w-dialog-prong.z-b .w-dialog-prong-in {
    border-top-color: #faf0cd
  }

  .w-tip.z-face-warn .w-dialog-prong.z-b .w-dialog-prong-out {
    border-top-color: #f3e041
  }

  .w-tip.z-face-warn .w-dialog-prong.z-t .w-dialog-prong-in {
    border-bottom-color: #faf0cd
  }

  .w-tip.z-face-warn .w-dialog-prong.z-t .w-dialog-prong-out {
    border-bottom-color: #f3e041
  }

  .w-tip.z-face-warn .w-dialog-prong.z-l .w-dialog-prong-in {
    border-right-color: #faf0cd
  }

  .w-tip.z-face-warn .w-dialog-prong.z-l .w-dialog-prong-out {
    border-right-color: #f3e041
  }

  .w-tip.z-face-warn .w-dialog-prong.z-r .w-dialog-prong-in {
    border-left-color: #faf0cd
  }

  .w-tip.z-face-warn .w-dialog-prong.z-r .w-dialog-prong-out {
    border-left-color: #f3e041
  }

  .w-tip-body {
    min-height: 32px;
  }

  .w-tip-text {
    padding: 0 10px;
  }
</style>
